import { getUUID } from '@/utils';
import { PublicGroupConfigClass } from '@/components/publicConfig';

// 默认页面配置
export const editCanvasConfig = {
	// 页面名称
	pageName: undefined,
	// 默认宽度
	width: 1920,
	// 默认高度
	height: 937,
	// 默认背景色
	background: undefined,
	backgroundImage: undefined,
	// 是否使用纯颜色
	selectColor: true,
	// 适配方式
	previewScaleType: 'fit',
	// 页面请求
	apiList: []
};
export default {
	state: {
		// 画布属性
		editCanvas: {
			// 编辑区域 Dom
			editLayoutDom: null,
			editContentDom: null,
			// 偏移量
			offset: 20,
			// 系统控制缩放
			scale: 1,
			// 用户控制的缩放
			userScale: 1,
			// 锁定缩放
			lockScale: false,
			// 初始化
			isCreate: false,
			// 拖拽中
			isDrag: false,
			// 框选中
			isSelect: false,
			// 代码编辑中
			isCodeEdit: false
		},
		// 右键菜单
		rightMenuShow: false,
		// 鼠标定位
		mousePosition: {
			startX: 0,
			startY: 0,
			x: 0,
			y: 0
		},
		// 目标图表
		targetChart: {
			hoverId: undefined,
			selectId: []
		},
		// 记录临时数据（复制等）
		recordChart: undefined,
		/********************************************** 画布属性（需存储给后端） *********************************/
		// 数据池（公共接口）
		requestDataPond: [],
		// 画布属性（需存储给后端）
		editCanvasConfig: clone(editCanvasConfig),
		// 图表数组（需存储给后端）
		componentList: [
			// {
			// 	id: '1br500peo3pc00',
			// 	isGroup: false,
			// 	attr: { x: 32, y: 145, w: 500, h: 300, offsetX: 0, offsetY: 0, zIndex: -1 },
			// 	styles: {
			// 		filterShow: false,
			// 		hueRotate: 0,
			// 		saturate: 1,
			// 		contrast: 1,
			// 		brightness: 1,
			// 		opacity: 1,
			// 		rotateZ: 0,
			// 		rotateX: 0,
			// 		rotateY: 0,
			// 		skewX: 0,
			// 		skewY: 0,
			// 		blendMode: 'normal',
			// 		animations: []
			// 	},
			// 	status: { lock: false, hide: false },
			// 	request: {
			// 		requestDataType: 0,
			// 		requestHttpType: 'get',
			// 		requestUrl: '',
			// 		requestIntervalUnit: 'second',
			// 		requestContentType: 0,
			// 		requestParamsBodyType: 'none',
			// 		requestSQLContent: { sql: 'select * from  where' },
			// 		requestParams: { Body: { 'form-data': {}, 'x-www-form-urlencoded': {}, json: '', xml: '' }, Header: {}, Params: {} }
			// 	},
			// 	events: { baseEvent: {}, advancedEvents: {}, interactEvents: [] },
			// 	name: 'BarCrossrange',
			//  image: 'chart/charts/bar_x.png'
			// 	option: {
			// 		legend: {
			// 			show: true,
			// 			type: 'scroll',
			// 			x: 'center',
			// 			y: 'top',
			// 			icon: 'circle',
			// 			orient: 'horizontal',
			// 			textStyle: { color: '#B9B8CE', fontSize: 18 },
			// 			itemHeight: 15,
			// 			itemWidth: 15,
			// 			pageTextStyle: { color: '#B9B8CE' }
			// 		},
			// 		xAxis: {
			// 			show: true,
			// 			name: '',
			// 			nameGap: 15,
			// 			nameTextStyle: { color: '#B9B8CE', fontSize: 12 },
			// 			inverse: false,
			// 			axisLabel: { show: true, fontSize: 12, color: '#B9B8CE', rotate: 0 },
			// 			position: 'bottom',
			// 			axisLine: { show: true, lineStyle: { color: '#B9B8CE', width: 1 }, onZero: true },
			// 			axisTick: { show: true, length: 5 },
			// 			splitLine: { show: false, lineStyle: { color: '#484753', width: 1, type: 'solid' } },
			// 			type: 'value'
			// 		},
			// 		yAxis: {
			// 			show: true,
			// 			name: '',
			// 			nameGap: 15,
			// 			nameTextStyle: { color: '#B9B8CE', fontSize: 12 },
			// 			inverse: false,
			// 			axisLabel: { show: true, fontSize: 12, color: '#B9B8CE', rotate: 0 },
			// 			position: 'left',
			// 			axisLine: { show: true, lineStyle: { color: '#B9B8CE', width: 1 }, onZero: true },
			// 			axisTick: { show: true, length: 5 },
			// 			splitLine: { show: true, lineStyle: { color: '#484753', width: 1, type: 'solid' } },
			// 			type: 'category'
			// 		},
			// 		grid: { show: false, left: '10%', top: '60', right: '10%', bottom: '60' },
			// 		tooltip: { show: true, trigger: 'axis', axisPointer: { show: true, type: 'shadow' } },
			// 		data: {
			// 			dimensions: ['product', 'data1', 'data2'],
			// 			source: [
			// 				{ product: 'Mon', data1: 120, data2: 130 },
			// 				{ product: 'Tue', data1: 200, data2: 130 },
			// 				{ product: 'Wed', data1: 150, data2: 312 },
			// 				{ product: 'Thu', data1: 80, data2: 268 },
			// 				{ product: 'Fri', data1: 70, data2: 155 },
			// 				{ product: 'Sat', data1: 110, data2: 117 },
			// 				{ product: 'Sun', data1: 130, data2: 160 }
			// 			]
			// 		},
			// 		series: [
			// 			{
			// 				type: 'bar',
			// 				barWidth: null,
			// 				label: { show: true, position: 'right', color: '#fff', fontSize: 12 },
			// 				itemStyle: { color: null, borderRadius: 0 }
			// 			},
			// 			{
			// 				type: 'bar',
			// 				barWidth: null,
			// 				label: { show: true, position: 'right', color: '#fff', fontSize: 12 },
			// 				itemStyle: { color: null, borderRadius: 0 }
			// 			}
			// 		],
			// 		backgroundColor: 'rgba(0,0,0,0)'
			// 	}
			// },
		]
	},
	getters: {
		// 获取需要存储的数据项
		getStorageInfo() {
			return {
				editCanvasConfig: this.editCanvasConfig,
				componentList: this.componentList
			};
		}
	},
	actions: {
		// * 设置 editCanvas 数据项
		setEditCanvas(key, value) {
			this.editCanvas[key] = value;
		},
		// * 设置 editCanvasConfig（需保存后端） 数据项
		setEditCanvasConfig(key, value) {
			this.editCanvasConfig[key] = value;
		},
		// * 设置目标数据 hover
		setTargetHoverChart(hoverId) {
			this.targetChart.hoverId = hoverId;
		},
		// * 设置目标数据 select
		setTargetSelectChart(selectId, push = false) {
			// 重复选中
			if (this.targetChart.selectId.find((e) => e === selectId)) return;

			// 无 id 清空
			if (!selectId) {
				this.targetChart.selectId = [];
				return;
			}
			// 多选
			if (push) {
				// 字符串
				if (isString(selectId)) {
					this.targetChart.selectId.push(selectId);
					return;
				}
				// 数组
				if (isArray(selectId)) {
					this.targetChart.selectId.push(...selectId);
					return;
				}
			} else {
				// 字符串
				if (isString(selectId)) {
					this.targetChart.selectId = [selectId];
					return;
				}
				// 数组
				if (isArray(selectId)) {
					this.targetChart.selectId = selectId;
					return;
				}
			}
		},
		// * 设置记录数据
		setRecordChart(item) {
			this.recordChart = cloneDeep(item);
		},
		// * 设置鼠标位置
		setMousePosition(x, y, startX, startY) {
			if (x) this.mousePosition.x = x;
			if (y) this.mousePosition.y = y;
			if (startX) this.mousePosition.startX = startX;
			if (startY) this.mousePosition.startY = startY;
		},
		// * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1）
		fetchTargetIndex(id) {
			const targetId = id || (this.targetChart.selectId.length && this.targetChart.selectId[0]) || undefined;
			if (!targetId) {
				loadingFinish();
				return -1;
			}
			const targetIndex = this.componentList.findIndex((e) => e.id === targetId);

			// 当前
			if (targetIndex !== -1) {
				return targetIndex;
			} else {
				const length = this.componentList.length;
				for (let i = 0; i < length; i++) {
					if (this.componentList[i].isGroup) {
						for (const cItem of this.componentList[i].groupList) {
							if (cItem.id === targetId) {
								return i;
							}
						}
					}
				}
			}
			return -1;
		},
		// * 统一格式化处理入参 id
		idPreFormat(id) {
			const idArr = [];
			if (!id) {
				idArr.push(...this.targetChart.selectId);
				return idArr;
			}
			if (isString(id)) idArr.push(id);
			if (isArray(id)) idArr.push(...id);
			return idArr;
		},
		/**
		 * * 新增组件列表
		 * @param componentInstance 新图表实例
		 * @param isHead 是否头部插入
		 * @param isHistory 是否进行记录
		 * @returns
		 */
		addComponentList(componentInstance, isHead = false, isHistory = false) {
			if (componentInstance instanceof Array) {
				componentInstance.forEach((item) => {
					this.addComponentList(item, isHead, isHistory);
				});
				return;
			}
			if (isHistory) {
				this.createAddHistory([componentInstance]);
			}
			if (isHead) {
				this.componentList.unshift(componentInstance);
				return;
			}
			this.componentList.push(componentInstance);
		},
		// * 删除组件
		removeComponentList(id, isHistory = true) {
			try {
				const idArr = this.idPreFormat(id);
				const history = [];
				// 遍历所有对象
				if (!idArr.length) return;
				idArr.forEach((ids) => {
					const index = this.fetchTargetIndex(ids);
					if (index !== -1) {
						history.push(this.componentList[index]);
						this.componentList.splice(index, 1);
					}
				});
				isHistory && this.createDeleteHistory(history);
				return;
			} catch (value) {
				console.log(value);
			}
		},
		// * 重置组件位置
		resetComponentPosition(item, isForward) {
			const index = this.fetchTargetIndex(item.id);
			if (index > -1) {
				const componentInstance = this.componentList[index];
				if (isForward) {
					componentInstance.orgConfig.attr = Object.assign(componentInstance.orgConfig.attr, {
						x: item.orgConfig.attr.x + item.orgConfig.attr.offsetX,
						y: item.orgConfig.attr.y + item.orgConfig.attr.offsetY
					});
				} else {
					componentInstance.orgConfig.attr = Object.assign(componentInstance.orgConfig.attr, {
						x: item.orgConfig.attr.x,
						y: item.orgConfig.attr.y
					});
				}
			}
		},
		// * 移动组件
		moveComponentList(item) {
			this.createMoveHistory(item);
		},
		// * 更新组件列表某一项的值
		updateComponentList(index, newData) {
			if (index < 1 && index > this.componentList.length) return;
			this.componentList[index] = newData;
		},
		// * 设置页面样式属性
		setPageStyle(key, value) {
			const dom = this.editCanvas.editContentDom;
			if (dom) dom.style[key] = value;
		},
		// * 移动组件列表层级位置到两端
		setBothEnds(isEnd = false) {
			try {
				// 暂不支持多选
				if (this.targetChart.selectId.length > 1) return;
				loadingStart();
				const index = this.fetchTargetIndex();
				const targetData = this.componentList[index];
				if (index !== -1) {
					// 置底排除最底层, 置顶排除最顶层
					if (isEnd) {
						const minZ = minBy(this.componentList, (o) => o.orgConfig.attr.zIndex).orgConfig.attr.zIndex;
						if (targetData.orgConfig.attr.zIndex !== minZ) targetData.orgConfig.attr.zIndex = minZ - 1;
					} else {
						const maxZ = maxBy(this.componentList, (o) => o.orgConfig.attr.zIndex).orgConfig.attr.zIndex;
						if (targetData.orgConfig.attr.zIndex !== maxZ) targetData.orgConfig.attr.zIndex = maxZ + 1;
					}
				}
				loadingFinish();
			} catch (value) {
				loadingError();
			}
		},
		// * 置顶
		setTop() {
			this.setBothEnds(false);
		},
		// * 置底
		setBottom() {
			this.setBothEnds(true);
		},
		// * 上移/下移互换图表位置
		wrap(isDown = false) {
			try {
				// 暂不支持多选
				if (this.targetChart.selectId.length > 1) return;
				loadingStart();
				const index = this.fetchTargetIndex();
				if (index !== -1) {
					const targetData = this.componentList[index];
					// 下移排除最底层, 上移排除最顶层
					if (isDown) {
						targetData.orgConfig.attr.zIndex -= 1;
					} else {
						targetData.orgConfig.attr.zIndex += 1;
					}
					loadingFinish();
				}
			} catch (value) {
				loadingError();
			}
		},
		// * 图层上移
		setUp() {
			this.wrap(false);
		},
		// * 图层下移
		setDown() {
			this.wrap(true);
		},
		// * 复制
		setCopy(isCut = false) {
			// 暂不支持多选
			if (this.targetChart.selectId.length > 1) return;
			const index = this.fetchTargetIndex();
			if (index !== -1) {
				const copyData = {
					charts: this.componentList[index],
					type: isCut ? 'cut' : 'copy'
				};
				this.setRecordChart(copyData);
				msgSuccess(isCut ? '剪切图表成功' : '复制图表成功！');
			}
		},
		// * 剪切
		setCut() {
			this.setCopy(true);
		},
		// * 粘贴
		setParse() {
			try {
				const recordCharts = this.recordChart;
				if (recordCharts === undefined) return;

				const parseHandle = (e) => {
					e = cloneDeep(e);
					e.orgConfig.attr.x = this.mousePosition.x;
					e.orgConfig.attr.y = this.mousePosition.y;
					// 外层生成新 id
					e.id = getUUID();
					// 分组列表生成新 id
					if (e.isGroup) {
						e.groupList.forEach((item) => {
							item.id = getUUID();
						});
					}
					return e;
				};
				const isCut = recordCharts.type === 'cut';
				const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [recordCharts.charts];
				// 多项
				targetList.forEach((e) => {
					this.addComponentList(parseHandle(e), undefined, true);
					// 剪切需删除原数据
					if (isCut) {
						this.setTargetSelectChart(e.id);
						this.removeComponentList(undefined, true);
					}
				});
				if (isCut) this.setRecordChart(undefined);
			} catch (value) {
				console.log(value);
			}
		},
		// * 撤回/前进 目标处理
		setBackAndSetForwardHandle(HistoryItem, isForward = false) {
			// 处理画布
			if (HistoryItem.targetType === 'canvas') {
				this.editCanvas = HistoryItem.historyData[0];
				return;
			}

			// 取消选中
			this.setTargetSelectChart();

			// 重新选中
			const historyData = HistoryItem.historyData;
			if (isArray(historyData)) {
				// 选中目标元素，支持多个
				historyData.forEach((item) => {
					this.setTargetSelectChart(item.id, true);
				});
			}

			// 处理新增类型
			const isAdd = HistoryItem.actionType === 'add';
			const isDel = HistoryItem.actionType === 'delete';
			if (isAdd || isDel) {
				if ((isAdd && isForward) || (isDel && !isForward)) {
					historyData.forEach((item) => {
						this.addComponentList(item);
					});
					return;
				}
				historyData.forEach((item) => {
					this.removeComponentList(item.id, false);
				});
				return;
			}

			// 处理移动
			const isMove = HistoryItem.actionType === 'move';
			if (isMove) {
				historyData.forEach((item) => {
					this.resetComponentPosition(item, isForward);
				});
				return;
			}

			// 处理层级
			const isTop = HistoryItem.actionType === 'top';
			const isBottom = HistoryItem.actionType === 'bottom';
			if (isTop || isBottom) {
				if (!isForward) {
					// 插入到原有位置
					if (isTop) this.componentList.pop();
					if (isBottom) this.componentList.shift();
					this.componentList.splice(historyData[0].orgConfig.attr.zIndex, 0, historyData[0]);
					return;
				}
				if (isTop) this.setTop(false);
				if (isBottom) this.setBottom(false);
			}

			const isUp = HistoryItem.actionType === 'up';
			const isDown = HistoryItem.actionType === 'down';
			if (isUp || isDown) {
				if ((isUp && isForward) || (isDown && !isForward)) {
					this.setUp(false);
					return;
				}
				this.setDown(false);
				return;
			}

			// 处理分组
			const isGroup = HistoryItem.actionType === 'group';
			const isUnGroup = HistoryItem.actionType === 'un_group';
			if (isGroup || isUnGroup) {
				if ((isGroup && isForward) || (isUnGroup && !isForward)) {
					const ids = [];
					if (historyData.length > 1) {
						historyData.forEach((item) => {
							ids.push(item.id);
						});
					} else {
						const group = historyData[0];
						group.groupList.forEach((item) => {
							ids.push(item.id);
						});
					}
					this.setGroup(ids, false);
					return;
				}
				// 都需使用子组件的id去解组
				if (historyData.length > 1) {
					this.setUnGroup([historyData[0].id], undefined, false);
				} else {
					this.setUnGroup([historyData[0].groupList[0].id], undefined, false);
				}
				return;
			}

			// 处理锁定
			const isLock = HistoryItem.actionType === 'lock';
			const isUnLock = HistoryItem.actionType === 'unlock';
			if (isLock || isUnLock) {
				if ((isLock && isForward) || (isUnLock && !isForward)) {
					historyData.forEach((item) => {
						this.setLock(!item.status.lock, false);
					});
					return;
				}
				historyData.forEach(() => {
					this.setUnLock(false);
				});
				return;
			}

			// 处理隐藏
			const isHide = HistoryItem.actionType === 'hide';
			const isShow = HistoryItem.actionType === 'show';
			if (isHide || isShow) {
				if ((isHide && isForward) || (isShow && !isForward)) {
					historyData.forEach((item) => {
						this.setHide(!item.status.hide, false);
					});
					return;
				}
				historyData.forEach(() => {
					this.setShow(false);
				});
				return;
			}
		},
		// * 撤回
		setBack() {
			try {
				loadingStart();
				const targetData = this.backAction();
				if (!targetData) {
					loadingFinish();
					return;
				}
				this.setBackAndSetForwardHandle(targetData);
				loadingFinish();
			} catch (value) {
				loadingError();
			}
		},
		// * 批量撤回
		setBackList(i) {
			try {
				loadingStart();
				// 最后一个画布初始化不能删除
				if (i !== this.backStack.length - 1) {
					const targetData = this.backStack.splice(this.backStack.length - i);
					// 移除记录到前进堆
					this.pushForwardStack(targetData);
					if (!targetData) {
						loadingFinish();
						return;
					}
					targetData.forEach((item) => {
						this.setBackAndSetForwardHandle(item);
					});
				}
				loadingFinish();
			} catch (value) {
				loadingError();
			}
		},
		// * 前进
		setForward() {
			try {
				loadingStart();
				const targetData = this.forwardAction();
				if (!targetData) {
					loadingFinish();
					return;
				}
				this.setBackAndSetForwardHandle(targetData, true);
				loadingFinish();
			} catch (value) {
				loadingError();
			}
		},
		// * 移动位置
		setMove(keyboardValue) {
			const index = this.fetchTargetIndex();
			if (index === -1) return;
			const attr = this.componentList[index].orgConfig.attr;
			const distance = 5;
			switch (keyboardValue) {
				case 'up':
					attr.y -= distance;
					break;
				case 'right':
					attr.x += distance;
					break;
				case 'down':
					attr.y += distance;
					break;
				case 'left':
					attr.x -= distance;
					break;
			}
		},
		// * 创建分组
		setGroup(id, isHistory = true) {
			try {
				const selectIds = this.idPreFormat(id) || this.targetChart.selectId;
				if (selectIds.length < 2) return;

				const groupClass = new PublicGroupConfigClass();
				// 记录整体坐标
				const groupAttr = {
					l: this.editCanvasConfig.width,
					t: this.editCanvasConfig.height,
					r: 0,
					b: 0
				};
				const targetList = [];
				const historyList = [];

				// 若目标中有数组则先解组
				const newSelectIds = [];
				selectIds.forEach((id) => {
					const targetIndex = this.fetchTargetIndex(id);
					if (targetIndex !== -1 && this.componentList[targetIndex].isGroup) {
						this.setUnGroup(
							[id],
							(e) => {
								e.forEach((e) => {
									this.addComponentList(e);
									newSelectIds.push(e.id);
								});
							},
							false
						);
					} else if (targetIndex !== -1) {
						newSelectIds.push(id);
					}
				});
				newSelectIds.forEach((id) => {
					// 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
					const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0];
					const { x, y, w, h } = item.orgConfig.attr;
					const { l, t, r, b } = groupAttr;
					// 左
					groupAttr.l = l > x ? x : l;
					// 上
					groupAttr.t = t > y ? y : t;
					// 宽
					groupAttr.r = r < x + w ? x + w : r;
					// 高
					groupAttr.b = b < y + h ? y + h : b;

					targetList.push(item);
					historyList.push(toRaw(item));
				});

				// 修改原数据之前，先记录
				if (isHistory) this.createGroupHistory(historyList);

				// 设置子组件的位置
				targetList.forEach((item) => {
					item.orgConfig.attr.x = item.orgConfig.attr.x - groupAttr.l;
					item.orgConfig.attr.y = item.orgConfig.attr.y - groupAttr.t;
					groupClass.groupList.push(item);
				});

				// 设置 group 属性
				groupClass.orgConfig.attr.x = groupAttr.l;
				groupClass.orgConfig.attr.y = groupAttr.t;
				groupClass.orgConfig.attr.w = groupAttr.r - groupAttr.l;
				groupClass.orgConfig.attr.h = groupAttr.b - groupAttr.t;

				this.addComponentList(groupClass);
				this.setTargetSelectChart(groupClass.id);
			} catch (error) {
				console.log(error);
			}
		},
		// * 解除分组
		setUnGroup(ids, callBack, isHistory = true) {
			try {
				const selectGroupIdArr = ids || this.targetChart.selectId;
				if (selectGroupIdArr.length !== 1) return;

				// 解组
				const unGroup = (targetIndex) => {
					const targetGroup = this.componentList[targetIndex];
					if (!targetGroup.isGroup) return;

					// 记录数据
					if (isHistory) this.createUnGroupHistory(cloneDeep([targetGroup]));

					// 分离组件并还原位置属性
					targetGroup.groupList.forEach((item) => {
						item.orgConfig.attr.x = item.orgConfig.attr.x + targetGroup.orgConfig.attr.x;
						item.orgConfig.attr.y = item.orgConfig.attr.y + targetGroup.orgConfig.attr.y;
						if (!callBack) this.addComponentList(item);
					});

					// 添加失焦效果
					this.setTargetSelectChart(undefined);

					// 删除分组
					this.removeComponentList(targetGroup.id, false);

					if (callBack) {
						callBack(targetGroup.groupList);
					}
				};
				const targetIndex = this.fetchTargetIndex(selectGroupIdArr[0]);
				// 判断目标是否为分组父级
				if (targetIndex !== -1) unGroup(targetIndex);
			} catch (error) {
				console.log(error);
				msgError('解除分组失败，请联系管理员！');
			}
		},
		// * 锁定
		setLock(status = true, isHistory = true) {
			try {
				// 暂不支持多选
				if (this.targetChart.selectId.length > 1) return;

				const index = this.fetchTargetIndex();
				if (index !== -1) {
					// 更新状态
					const targetItem = this.componentList[index];
					targetItem.status.lock = status;

					// 历史记录
					if (isHistory) {
						status ? this.createLockHistory([targetItem]) : this.createUnLockHistory([targetItem]);
					}
					this.updateComponentList(index, targetItem);
					// 锁定添加失焦效果
					if (status) this.setTargetSelectChart(undefined);
					return;
				}
			} catch (value) {
				console.log(value);
			}
		},
		// * 解除锁定
		setUnLock(isHistory = true) {
			this.setLock(false, isHistory);
		},
		// * 隐藏
		setHide(status = true, isHistory = true) {
			try {
				// 暂不支持多选
				if (this.targetChart.selectId.length > 1) return;

				const index = this.fetchTargetIndex();
				if (index !== -1) {
					// 更新状态
					const targetItem = this.componentList[index];
					targetItem.status.hide = status;

					// 历史记录
					if (isHistory) {
						status ? this.createHideHistory([targetItem]) : this.createShowHistory([targetItem]);
					}
					this.updateComponentList(index, targetItem);

					// 隐藏添加失焦效果
					if (status) this.setTargetSelectChart(undefined);
				}
			} catch (value) {
				console.log(value);
			}
		},
		// * 显示
		setShow(isHistory = true) {
			this.setHide(false, isHistory);
		},
		// * 设置页面大小
		setPageSize(scale) {
			this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`);
			this.setPageStyle('width', `${this.editCanvasConfig.width * scale}px`);
		},
		// * 计算缩放
		computedScale() {
			if (this.editCanvas.editLayoutDom) {
				// 现有展示区域
				const width = this.editCanvas.editLayoutDom.clientWidth - this.editCanvas.offset * 2 - 5;
				const height = this.editCanvas.editLayoutDom.clientHeight - this.editCanvas.offset * 4;

				// 用户设定大小
				const editCanvasWidth = this.editCanvasConfig.width;
				const editCanvasHeight = this.editCanvasConfig.height;

				// 需保持的比例
				const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5));
				const currentRate = parseFloat((width / height).toFixed(5));

				if (currentRate > baseProportion) {
					// 表示更宽
					const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5));
					this.setScale(scaleWidth > 1 ? 1 : scaleWidth);
				} else {
					// 表示更高
					const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5));
					this.setScale(scaleHeight > 1 ? 1 : scaleHeight);
				}
			} else {
				msgWarning('请先创建画布，再进行缩放');
			}
		},
		/**
		 * * 设置缩放
		 * @param scale 0~1 number 缩放比例;
		 * @param force boolean 强制缩放
		 */
		setScale(scale, force = false) {
			if (!this.editCanvas.lockScale || force) {
				this.setPageSize(scale);
				this.editCanvas.userScale = scale;
				this.editCanvas.scale = scale;
			}
		}
	}
};
